<template>
  <div class="menu-tree-body-menu-title">
    <MenuItemContent :menu="menu"></MenuItemContent>
    <!-- 收藏 -->
    <i
      v-if="!isMenu && !menu.lock"
      class="menu-tree-body-menu-title-star"
      :class="{ 'fas fa-star is--star': isStar, 'fal fa-star': !isStar }"
      @click="onClick"
    ></i>
  </div>
</template>
<script>
  import { defineComponent } from 'vue';
  import { collectStarMenu } from '@/hooks/use-menu';
  import MenuItemContent from './menu-item-content.vue';
  export default defineComponent({
    name: 'AdminSiderMenuItem',
    components: { MenuItemContent },
    props: {
      menu: Object,
      isStar: Boolean,
    },
    setup(props) {
      const isMenu = props.menu.type === 'MENU';
      const onClick = (event) => {
        event.stopPropagation();
        collectStarMenu(props.menu.id);
      };
      return { isMenu, onClick };
    },
  });
</script>
<style></style>
